"use client";
import { FC, PropsWithChildren, useState } from "react";
import HeaderBack from "@/components/HeaderBack";
import ButtonOwn from "@/components/ButtonOwn";
import DomainFooter from "@/components/DomainFooter";
import './page.scss'
import React from "react";
import { phoneRegex } from "@/utils";
import {getCheckUserPhoneExistApi, getSendCodeApi} from "@/api/user";

interface Props {}

const ResetPhone: FC<PropsWithChildren<Props>> = () => {

    let [userPhone, setUserPhone] = useState('')
    const changeUserPhone = (e: { target: { value: any; }; }) => {
        setUserPhone(e.target.value)
    }
    let [verifyInfo, setVerifyInfo] = useState({
        msgError: '',
        check: false
    })

    const checkUserPhoneRequest = async () => {
        let { code, msg } = await getCheckUserPhoneExistApi({user_phone: userPhone})
        if(code == 200) {
            getSendCodeApi({user_phone: userPhone}).then((res) => {
                if(res.code == 200) {
                    alert('验证码发送成功')
                     router.push('/verification')
                }
            })
            router.push('/verification')
            return
        }
        setVerifyInfo({
            ...verifyInfo,
            msgError: msg,
        })
    }
    return (
        <div className="verification-box">
            <HeaderBack />
            <div className="main">
                <div className="title">
                    <h2>Ativa a sua conta por entrar a Senha de Verificação!</h2>
                    <div>A senha de verificação foi enviado para o teu telemóvel 16982013895</div>
                </div>
                <div className="phoneInput">
                    <input type="tel" value={userPhone} onChange={changeUserPhone} placeholder="Reenviar código" maxLength={6} />
                    <span className="after">+55</span>
                </div>
                { verifyInfo.msgError && <div className="tips"> {verifyInfo.msgError} </div> }
                <div className="btnContent">
                    <ButtonOwn active={verifyInfo.check} callbackFun={checkUserPhoneRequest}>Completar</ButtonOwn>
                </div>
            </div>
            <DomainFooter />
        </div>
    );
};

export default ResetPhone;